<template>
	<div class="mainCont">
		<div class="leftCont">
			<ul class="snav">
				<li>
					<router-link to="/jkiframe/1" v-if="$route.params.id==1" @click.native="flushCom"
						:class="$route.params.id==1?'active':''">监控概况</router-link>
					<router-link to="/jkiframe/1" v-else :class="$route.params.id==1?'active':''">监控概况</router-link>
				</li>
				<li>
					<router-link to="/jkiframe/2" v-if="$route.params.id==2" @click.native="flushCom"
						:class="$route.params.id==2?'active':''">监控大屏</router-link>
					<router-link to="/jkiframe/2" v-else :class="$route.params.id==2?'active':''">监控大屏</router-link>
				</li>
				<li>
					<router-link to="/jkiframe/3" v-if="$route.params.id==3" @click.native="flushCom"
						:class="$route.params.id==3?'active':''">业务服务</router-link>
					<router-link to="/jkiframe/3" v-else :class="$route.params.id==3?'active':''">业务服务</router-link>
				</li>

				<li>
					<a href="#" @click="down5=!down5">综合监控 <span class="iconfont icon-up"
							:style="down5?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down5">
						<router-link to="/jkiframe/4" v-if="$route.params.id==4" @click.native="flushCom"
							:class="$route.params.id==4?'active':''">操作系统</router-link>
						<router-link to="/jkiframe/4" v-else :class="$route.params.id==4?'active':''">操作系统</router-link>

						<router-link to="/jkiframe/5" v-if="$route.params.id==5" @click.native="flushCom"
							:class="$route.params.id==5?'active':''">数据库</router-link>
						<router-link to="/jkiframe/5" v-else :class="$route.params.id==5?'active':''">数据库</router-link>

						<router-link to="/jkiframe/6" v-if="$route.params.id==6" @click.native="flushCom"
							:class="$route.params.id==6?'active':''">应用程序</router-link>
						<router-link to="/jkiframe/6" v-else :class="$route.params.id==6?'active':''">应用程序</router-link>

						<router-link to="/jkiframe/7" v-if="$route.params.id==7" @click.native="flushCom"
							:class="$route.params.id==7?'active':''">中间件</router-link>
						<router-link to="/jkiframe/7" v-else :class="$route.params.id==7?'active':''">中间件</router-link>

						<router-link to="/jkiframe/8" v-if="$route.params.id==8" @click.native="flushCom"
							:class="$route.params.id==8?'active':''">网络设备</router-link>
						<router-link to="/jkiframe/8" v-else :class="$route.params.id==8?'active':''">网络设备</router-link>

						<router-link to="/jkiframe/9" v-if="$route.params.id==9" @click.native="flushCom"
							:class="$route.params.id==9?'active':''">服务器</router-link>
						<router-link to="/jkiframe/9" v-else :class="$route.params.id==9?'active':''">服务器</router-link>

						<router-link to="/jkiframe/10" v-if="$route.params.id==10" @click.native="flushCom"
							:class="$route.params.id==10?'active':''">存储</router-link>
						<router-link to="/jkiframe/10" v-else :class="$route.params.id==10?'active':''">存储</router-link>

						<router-link to="/jkiframe/11" v-if="$route.params.id==11" @click.native="flushCom"
							:class="$route.params.id==11?'active':''">虚拟化</router-link>
						<router-link to="/jkiframe/11" v-else :class="$route.params.id==11?'active':''">虚拟化
						</router-link>
					</div>
				</li>

				<li>
					<a href="#" @click="down8=!down8">告警管理 <span class="iconfont icon-up"
							:style="down8?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down8">
						<router-link to="/jkiframe/12" v-if="$route.params.id==12" @click.native="flushCom"
							:class="$route.params.id==12?'active':''">实时告警</router-link>
						<router-link to="/jkiframe/12" v-else :class="$route.params.id==12?'active':''">实时告警
						</router-link>
						
						<router-link to="/jkiframe/13" v-if="$route.params.id==13" @click.native="flushCom"
							:class="$route.params.id==13?'active':''">全部告警</router-link>
						<router-link to="/jkiframe/13" v-else :class="$route.params.id==13?'active':''">全部告警
						</router-link>
						
						<router-link to="/jkiframe/14" v-if="$route.params.id==14" @click.native="flushCom"
							:class="$route.params.id==14?'active':''">告警统计</router-link>
						<router-link to="/jkiframe/14" v-else :class="$route.params.id==14?'active':''">告警统计
						</router-link>
						
						<router-link to="/jkiframe/15" v-if="$route.params.id==15" @click.native="flushCom"
							:class="$route.params.id==15?'active':''">告警媒介</router-link>
						<router-link to="/jkiframe/15" v-else :class="$route.params.id==15?'active':''">告警媒介
						</router-link>
						
						<router-link to="/jkiframe/16" v-if="$route.params.id==16" @click.native="flushCom"
							:class="$route.params.id==16?'active':''">消息模版</router-link>
						<router-link to="/jkiframe/16" v-else :class="$route.params.id==16?'active':''">消息模版
						</router-link>
					</div>
				</li>
				
				<li>
					<a href="#" @click="down1=!down1">网络管理 <span class="iconfont icon-up"
							:style="down1?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down1">
						<router-link to="/jkiframe/17" v-if="$route.params.id==17" @click.native="flushCom"
							:class="$route.params.id==17?'active':''">网络拓扑</router-link>
						<router-link to="/jkiframe/17" v-else :class="$route.params.id==17?'active':''">网络拓扑
						</router-link>
						
						<router-link to="/jkiframe/18" v-if="$route.params.id==18" @click.native="flushCom"
							:class="$route.params.id==18?'active':''">IP管理</router-link>
						<router-link to="/jkiframe/18" v-else :class="$route.params.id==18?'active':''">IP管理
						</router-link>
					</div>
				</li>
				
				<li>
					<a href="#" @click="down2=!down2">报表管理 <span class="iconfont icon-up"
							:style="down2?'transform: rotateZ(180deg);':'transform: rotateZ(0deg);'"></span></a>
					<div class="down" v-if="down2">
						<router-link to="/jkiframe/19" v-if="$route.params.id==19" @click.native="flushCom"
							:class="$route.params.id==19?'active':''">监控日报</router-link>
						<router-link to="/jkiframe/19" v-else :class="$route.params.id==19?'active':''">监控日报
						</router-link>
						
						<router-link to="/jkiframe/20" v-if="$route.params.id==20" @click.native="flushCom"
							:class="$route.params.id==20?'active':''">监控月报</router-link>
						<router-link to="/jkiframe/20" v-else :class="$route.params.id==20?'active':''">监控月报
						</router-link>
					</div>
				</li>
			</ul>

		</div>

		<div class="rightCont">
			<router-view>
			</router-view>
		</div>

	</div>
</template>
<script type="text/babel">
	import Vue from 'vue'
	export default {
		name: "",
		data() {
			return {
				down1: true,
				down2: true,
				down3: true,
				down4: true,
				down5: true,
				down6: true,
				down7: true,
				down8: true,
				num:'',
				num2:'',
				permissions:[]
			};
		},
		mounted() {
			var that = this
			// console.log('合同')
			console.log(that.$permissions)
			// if(!this.$route.params.title){
				
			// var url = ''
			
			// var t = setTimeout(function(){
				that.permissions = that.$permissions
			// 	if(that.permissions.indexOf(187) != -1){
			// 		console.log('------------agree----------------------------------')
			// 		that.$router.push('/agreement');
			// 	}else if(that.permissions.indexOf(191) != -1){
			// 		that.$router.push('/xminvoice');
			// 	}else if(that.permissions.indexOf(195) != -1){
			// 		that.$router.push('/supplier');
			// 	}else if(that.permissions.indexOf(198) != -1){
			// 		that.$router.push('/needpay');
			// 	}else if(that.permissions.indexOf(200) != -1){
			// 		that.$router.push('/contract');
			// 	}
			// 	clearTimeout(t)
			// },200)
			// }else{
			// 	that.permissions = that.$permissions
			// }
			
			
		},
		created() {
		},

		methods: {
			flushCom:function(){
				return
		　　},
		
		},

		computed: {
			
		},
	};
</script>
<style lang='less' scoped>
	.bla {
		color: #999;
		margin-left: 10px;
	}

	.bla:hover,
	.blactive {
		background: #4286f5;
		color: #fff;
		border-radius: 20px;
		text-align: center;
		margin-left: 10px;
	}

	/deep/sup {
		top: 0;
		margin-bottom: 3px;
	}

	/deep/.el-badge__content {
		height: auto;
		border: none;
		margin-left: 5px;
	}

	li {
		background: #fff;
		position: relative;
		z-index: 2;

	}

	.rightCont {
		position: relative;
	}

	.icon-up {
		transition: all .3s;
	}

	.down {
		transition: all .3s;
	}
</style>
